<template>
  <div class="prcList">
    <Loading v-if="loading"></Loading>
    <div class="info" v-else>
      <table class="listInfo" v-if="!showStart">
        <thead>
          <tr>
            <td>编号</td>
            <td>名称</td>
            <td>价格</td>
            <td>时间</td>
            <td>操作</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in tableData">
            <td>{{index+1}}</td>
            <td>{{item.type_name}}</td>
            <td>{{item.price}}</td>
            <td>{{item.time_len}}</td>
            <td>
              <a @click='getListId(item)'>编辑</a>
              <a @click='delListId(item.id)'>删除</a>
            </td>
          </tr>
        </tbody>
      </table>

      <div class="itemInfo" v-if="showStart">
          <div class="formBox">
              <p class="item"><span class="name">送货名称 ：</span><input v-model="date.name" class="mel" placeholder="请输入名称"></input><i>*</i></p>
              <p class="item"><span class="name">送货价格 ：</span><input v-model="date.price" class="mel" placeholder="请输入价格"></input><i>*</i></p>
              <p class="item"><span class="name">消耗时间 ：</span><input v-model="date.time" class="mel" placeholder="请输入天数"></input><i>*</i></p>
              <p class="item inputBox"><button @click="submitPut" class="submitInput">确定</button><button @click="empty" class="emptyInput">取消</button></p>
          </div>
      </div> 

    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import Loading from '@/components/loading'
import axios from 'axios'
import { Get, Post,Put,Delete } from '@/config/api'
export default {
  name: 'prcList',
  data() {
    return {
      loading: true,//加载状态
      showStart:false,//切换状态
      tableData: [],//表格数据
      listId:'',
      date:{
        name:'',
        price:'',
        time:''
      }
    }
  },
  mounted() {
    this.getData()
  },
  components: {
    Loading
  },
  methods: {
    //获取数据
    async getData() {
      if (this.Check()) {
        let reg=await Get('/order/pay/type?_sort=id',this.$store.state.token)
        this.tableData=reg.data
        this.loading=false
      }
    },
    //编辑配送方式
    getListId(e){
        this.showStart=true
        this.listId=e.id
        this.date.name=e.type_name
        this.date.price=e.price
        this.date.time=e.time_len
    },
    //删除配送方式
    async delListId(e){
      if(this.Check()){
        let reg=await Delete('/order/pay/type/'+e,this.$store.state.token)
        alert('删除成功')
        this.showStart=false
        this.getData()
      }
    },
    //修改配送方式
    async submitPut(){
        if(this.Check()){
          this.$store.dispatch("loadOpen");
          let data={
            "type_name":this.date.name,
            "price":this.date.price,
            "time_len":this.date.time
          }
          let reg=await Put('/order/pay/type/'+this.listId,this.$store.state.token,data)
          this.$store.dispatch("loadClose");
          alert('修改成功')
          this.showStart=false
          this.getData()
        }
    },
    //取消编辑
    empty(){
      this.showStart=false
    }
  }
}

</script>
